<template>
    <div class="welcome">
      <!-- 上半部分  start -->
      <div class="welcome-top">
        <el-card shadow="hover">
          <p class="icon-office-confirm" style="font-size: 3vw"></p>
          <p>{{this.todoData.length}}</p>
          <p>总待办数量</p>
        </el-card>
        <el-card shadow="hover">
          <p class="el-icon-date" style="font-size: 2.5vw"></p>
          <p>{{this.scheduleData.length}}</p>
          <p>总日程数量</p>
        </el-card>
        <el-card shadow="hover">
          <p class="el-icon-user" style="font-size: 2.5vw"></p>
          <p>{{this.stafflength}}</p>
          <p>总员工数量</p>
        </el-card>
        <el-card shadow="hover">
          <p class="icon-office-image-text" style="font-size: 3vw"></p>
          <p>{{this.meeting}}</p>
          <p>总会议数量</p>
        </el-card>
      </div>
      <!-- 上半部分  end -->
      <!-- 下半部分 start -->
      <div class="welcome-body">
        <div class="body-left">
          <div class="left-schedule">
            <p style="margin: 0px;font-size:1.2vw">日程</p>
            <div>
              <div class="schedule-left">
                <el-calendar v-model="CalendarDate">
                </el-calendar>
              </div>
              <div class="schedule-right">
                <div style="width:103%;height:100%;overflow-y:auto">
                  <div class="center-item" v-for="item in scheduleData" :key="item.sid">
                    <p>
                      <span class="el-icon-date"></span>
                      <span>{{' ' + item.startTime + ' '+ '-'+ ' ' + item.endTime}}</span>
                    </p>
                    <p>{{item.title}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left-todo">
            <p style="margin: 0px;font-size:1.2vw">待办</p>
            <div>
              <div style="width:101%;height:100%;overflow-y:auto">
                <el-card shadow="hover" class="right-item" v-for="item in todoData" :key="item.tid">
                  <span class="icon-office-confirm"></span>
                  <span>{{' ' + item.title}}</span>
                </el-card>
            </div>
            </div>
          </div>
        </div>
        <div class="body-right">
           <p style="margin: 0px;font-size:1.2vw">项目进度</p>
          <!-- 为echarts准备DOM -->
          <div style="width:100%;height:86%" id="main1"></div>
        </div>
      </div>
      <!-- 下半部分 end -->
    </div>
</template>

<script>
var echarts = require('echarts')
export default {
  name: 'Welcome',
  data() {
    return {
      CalendarDate: new Date(),
      data1: [], // echarts数据
      value: new Date(),
      scheduleData: [], // 日程安排
      todoData: [], // 待办事项
      stafflength: 0, // 员工数量
      meeting: 0, // 会议数量
      done: 0, // 已完成个数
      doing: 0, // 进行中个数
      notdo: 0 // 落后个数即过期
    }
  },
  mounted() {
    this.getdone()
    this.getSchedule()
    this.getTodo()
    this.getStaff()
    this.getMeeting()
  },
  methods: {
    // 初始化echarts数据
    initData() {
      this.requested = true
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '项目进度',
          subtext: '基于数据展示',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: this.done, name: '已完成' },
              { value: this.doing, name: '进行中' },
              { value: this.notdo, name: '落后' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      this.requested = false
    },
    // 获取日程个数
    getSchedule() {
      this.getRequest('/schedule/').then(resp => {
        if (resp) {
          this.scheduleData = resp.data
        }
      })
    },
    // 获取待办个数
    getTodo() {
      var mytodolist = []
      // 我发起的
      this.getRequest('/todo/set').then((resp) => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            if (!item.done && !item.deleted) mytodolist.push(item)
          })
          resp.data.unexpiredTodoList.forEach(item => {
            if (!item.done && !item.deleted) mytodolist.push(item)
          })
        } else {
          console.log('未拿到我发起的数据')
        }
      })
      // 我参与的
      this.getRequest('/todo/participate').then(resp => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            if (!item.done && !item.deleted) mytodolist.push(item)
          })
          resp.data.unexpiredTodoList.forEach(item => {
            if (!item.done && !item.deleted) mytodolist.push(item)
          }, error => console.log(error))
        } else {
          console.log('未拿到我参与的数据')
        }
      })
      this.todoData = mytodolist
    },
    // 获取项目进度
    getdone() {
      this.done = 0
      this.doing = 0
      this.notdo = 0
      // 我发起的
      this.getRequest('/todo/set').then((resp) => {
        if (resp) {
          // 过期的
          resp.data.expiredTodoList.forEach(item => {
            // 落后
            if (!item.done) {
              this.notdo++
            }
          })
          // 未过期
          resp.data.unexpiredTodoList.forEach(item => {
            // 已完成
            if (item.done) {
              this.done++
            }
            // 进行中
            if (!item.done) {
              this.doing++
            }
          })
          // console.log('this.done', this.done)
          // console.log('this.doing', this.doing)
          // console.log('this.notdo', this.notdo)
          this.initData(this.done, this.doing, this.notdo)
        }
      })
    },
    // 获取员工
    getStaff() {
      this.getRequest('/admin/emp/1/1000').then(resp => {
        if (resp) {
          this.stafflength = resp.total
        }
      })
    },
    // 总会议数量
    getMeeting() {
      this.getRequest('/mt/1/10').then(resp => {
        if (resp) {
          this.meeting = resp.total
        }
      })
    }
  }
}
</script>

<style>
/** 欢迎页大框架 */
.welcome {
  margin: 10px 10px;
  padding: 0px;
  width: 97.5%;
  height: 93%;
  overflow: hidden;
}
/**======================================= 头部区域 start ==========================*/
.welcome-top {
  width: 100%;;
  height: 16vh;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2vh;
}
.welcome-top .el-card {
  width: 20%;
  height: 100%;
  margin-right: 4vw;
  text-align: center;
}
.welcome-top .el-card__body {
  padding: 5px 20px;
}
.welcome-top .el-card p {
  margin: 0px;
  margin-bottom: 10px;
}
/**======================================= 头部区域 end ==========================*/
/**======================================= 下半区域 start ==========================*/
.welcome-body {
  width: 100%;
  height: 68vh;
  display: flex;
  justify-content: space-between;
}
/** 左边 start */
.body-left {
  width: 60%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
/** 日程 */
.left-schedule {
  width: 100%;
  height: 58%;
  box-sizing: border-box;
  padding: 1vh 1vw;
  border: 1px solid #DEE1E6;
  background-color: white;
}
.left-schedule > div {
  width: 100%;
  height: 90%;
  margin-top: 1vh;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.left-schedule > div .schedule-left {
  width: 45%;
  height: 100%;
  /* background-color: aquamarine; */
}
.left-schedule > div .schedule-right {
  width: 48%;
  height: 100%;
  overflow: hidden;
}
.center-item {
  width: 100%;
  height: 8vh;
  margin-bottom: 2vh;
  padding-left: 5px;
  padding-top: 10px;
  box-sizing: border-box;
  border: 1px solid #EAEDF1;
  border-radius: 5px;
}
.center-item:hover {
  box-shadow: 6px 6px 5px #dad6d6;
}
.center-item > p {
  margin: 0px 0px 6px;
}
.schedule-right .el-card__body {
  padding: 10px 10px !important;
  height: 5vh;
  margin-bottom: 2vh;
}
/** 待办 */
.left-todo {
  width: 100%;
  height: 40%;
  box-sizing: border-box;
  padding: 1vh 1vw;
  border: 1px solid #DEE1E6;
  background-color: white;
}
.left-todo > div {
  width: 100%;
  height: 85%;
  margin-top: 1vh;
  box-sizing: border-box;
  overflow: hidden;
}
.right-item {
  height: 5vh;
  width: 90%;
  box-sizing: border-box;
  margin-bottom: 2vh;
}
.el-card__body {
  padding: 10px 10px !important;
}
/** 右边 */
.body-right {
  width: 36%;
  height: 100%;
  box-sizing: border-box;
  padding: 1vh 1vw;
  background-color: white;
}
/** 日历 */
.el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  padding: 4px;
  height: 23px;
}
.el-calendar__body {
  padding: 5px 20px 0px !important;
}
</style>
